<template>
	<!-- 个人中心  -->
	<view class="per_center">
		<view class="per_center_box" v-for="(item,keyper) in per_center_box" :key="keyper" >
			<view class="per_center_box_title">{{item.title}}</view>
			<!-- 右箭头跳转 -->
			<view class="per_center_box_image">
				<span class="variable">{{item.variable}}</span>
				<image :src="item.image_one" mode=""></image>
				<span class="you">{{item.you}}</span>
				<!-- <image :src="item.image" mode=""></image> -->
			</view>
		</view><!-- </per_center_box_box> -->
		<!-- <view class="but">
			
		</view> -->
		<button>
			保存
		</button>

	</view><!-- set up设置 -->
</template>

<script>
	export default {
		data() {
			return {
			
				per_center_box: [{
						title: "头像",
						image_one:"/static/images/base_avatar.png",
						// image: "/static/images/yjt.png",
						you:">"
					},
					{
						title: "昵称",
						variable: "南烟",
						image: "/static/images/yjt.png"
					},
					{
						title: "手机",
						variable: "19862661901"
					},
					{
						title: "等级",
					
						variable: "V1"
					},
					{
						title: "邀请码",
						variable:"172053"
			
					}
				]

			}
		},
		onLoad() {

		},
		methods: {
		
		},
	}
</script>

<style lang="scss" scoped>
	.per_center {
		text-indent: 20rpx;
		line-height: 90rpx;
		// border:1px solid red;
		background-color: #F6F6F6;
		height: 100vh;
		button{
			color: white;
			width:45%;
			border-radius: 40rpx;
			margin-top:10%;
			
			background: linear-gradient(to right, #FA6E3F, #FEAB55);
		}
		.per_center_box {
			border: 2rpx solid #F3F3F3;
			border-right: 0rpx;
			border-left: 0rpx;
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			overflow: hidden;

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
				margin-right: 20rpx;
				// margin-left: 20rpx;
				border:1px sloid red;

			}

			.per_center_box_image {
				// overflow: hidden;
				.you{
				}
				color: #A0A0A0;
				.variable{
				
					text-align: right;
				}
			}

			.per_center_box_title {
				vertical-align: middle;
				// float: left;
			}
		}

		
	}
</style>
